<template>
  <div>
    <n-upload
      multiple
      directory-dnd
      :action="apiUrl + '/system/oss/upload-file'"
      :data="fileData"
      :max="5"
      @before-upload="beforeUpload"
      @change="handleChange"
      @finish="handleFinish"
      @error="handleError"
      :file-list="filelist"
      accept="image/png,image/jpeg,image/webp"
    >
      <n-upload-dragger>
        <div>
          <n-icon size="48" :depth="3">
            <CloudUpload />
          </n-icon>
        </div>
        <n-text> 上传图片 </n-text>
        <n-p style="font-size: 12px; margin-top: 5px"> 支持格式：.jpg.png.webp </n-p>
      </n-upload-dragger>
    </n-upload>
  </div>
</template>
<script setup lang="ts" name="liUploadImage">
  import { ref, Ref, defineEmits } from 'vue';
  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
  import { useMessage, UploadFileInfo } from 'naive-ui';
  import { CloudUpload } from '@vicons/ionicons5';
  import { useGlobSetting } from '@/hooks/setting';

  const { apiUrl } = useGlobSetting();

  const props = defineProps({});

  const message = useMessage();
  const { getDarkTheme, getAppTheme } = useDesignSetting();
  const emit = defineEmits(['finish']);

  let FILE_SERVER = 'https://cdn-file.agnet.top/';

  // 上传图片相关
  const fileData = {};

  const emitFileList: Ref = ref([]);
  const filelist: Ref = ref([]);

  const handleChange = ({
    file,
    event,
    fileList,
  }: {
    file: UploadFileInfo;
    event?: ProgressEvent;
    fileList: UploadFileInfo[];
  }) => {
    // console.log("上传的图片", file)
    // console.log("上传图片列表", fileList)
    // console.log("上传图片列表", filelist)
    filelist.value = fileList;
    if (file.status == 'finished' && fileList.length > 0) {
      emitFileList.value = [];
      fileList.map((item) => {
        emitFileList.value.push(item.url);
      });
      emit('finish', emitFileList.value);
    } else if (file.status == 'removed') {
      emitFileList.value = [];
      fileList.map((item) => {
        emitFileList.value.push(item.url);
      });
      emit('finish', emitFileList.value);
    }
  };
  const handleFinish = ({ file, event }: { file: UploadFileInfo; event?: ProgressEvent }) => {
    message.success('上传成功');
    file.url =
      FILE_SERVER + JSON.parse((event?.target as XMLHttpRequest).response).msg.replace(/\\/g, '/');
    return file;
  };
  const handleError = ({ file, event }: { file: UploadFileInfo; event?: ProgressEvent }) => {
    message.error((event?.target as XMLHttpRequest).response);
  };
  const beforeUpload = async (data: { file: UploadFileInfo; fileList: UploadFileInfo[] }) => {
    // console.log("上传的图片", data)
    if (
      data.file.file?.type !== 'image/png' &&
      data.file.file?.type !== 'image/jpeg' &&
      data.file.file?.type !== 'image/webp'
    ) {
      message.error('只能上传png格式,jpg格式或者webp格式的图片文件，请重新上传');
      return false;
    } else if (data.file.file?.size > 1048576 * 3) {
      message.error('图片过大，请上传小于3MB的图片重新上传');
      return false;
    }
    return true;
  };
  const emptyFileList = () => {
    // console.log("清空上传列表")
    filelist.value = [];
  };
  defineExpose({
    emptyFileList,
  });
</script>

<style scoped lang="less"></style>
